<template>
	<view>
		<u-navbar title="添加計時套餐" placeholder autoBack>
			<view class="flexright xiaohui" slot="right"  @click="addkehusf">客戶收費 </view>
		</u-navbar>
		<view class="mainpadding2">
			<view class="ffffff mainpadding_top flexbetween radius">
				<view class="hei_text bold titletext">套餐名稱</view>
				<input type="text" class="hei_text main_size bold" style="text-align: right;" placeholder="請輸入套餐名稱"
					v-model="name">
			</view>
			<view class="ffffff mainpadding_top flexbetween radius">
				<view class="hei_text bold titletext">服務費</view>
				<view class="flexright">
					<input type="number" class="hei_text margin_right1 main_size bold" style="text-align: right;"
						placeholder="請輸入服務費" v-model="fwf_rate">
					<view class="hei_text bold titletext">%</view>
				</view>
			</view>
			<view class="ffffff mainpadding_top flexbetween radius">
				<view class="hei_text bold titletext">一次限點總數</view>
				<input type="number" class="hei_text margin_right1 main_size bold" style="text-align: right;"
					placeholder="請輸入數量" v-model="xd_num">
			</view>
			<view class="ffffff mainpadding_top flexbetween radius">
				<view class="hei_text bold titletext">最低數可再點</view>
				<input type="number" class="hei_text margin_right1 main_size bold" style="text-align: right;"
					placeholder="請輸入數量" v-model="ccangin_num">
			</view>
			<view class="flexbetween margin_top" v-for="(item,index) in cdbtc_arr" :key="item.id">
				<view class="ffffff mainpadding flexbetween radius" style="width: 90%;">
					<view class="hei_text bold titletext">{{item.name}}</view>
					<input type="number" class="hei_text main_size bold" style="text-align: right;" placeholder="請輸入"
						v-model="item.price">
				</view>
				<u-icon name="trash" @click="cdbtc_arr.splice(index,1)" color="#ff0000" size="24"></u-icon>
			</view>
			<view class="ffffff mainpadding_top flexbetween radius">
				<view class="hei_text bold titletext">狀態</view>
				<u-radio-group v-model="status" placement="row" circle>
					<u-radio activeColor="#ff8505" :customStyle="{marginRight: '30rpx'}" label="啓用" name="1"></u-radio>
					<u-radio activeColor="#ff8505" label="禁用" name="2"></u-radio>
				</u-radio-group>
			</view>
			<view class="submitbtn margin_top" @click="submit">確認</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				listid: "",
				status: "1",
				name: "",
				fwf_rate: "",
				xd_num:"",
				ccangin_num:"",
				cdbtc_arr:[],
				issubmit:false
			}
		},
		onLoad(options) {
			if (options.id) {
				this.listid = options.id
				uni.setNavigationBarTitle({
					title: "編輯套餐"
				})
				this.getDetail()
			}
			uni.$on("checkcdbkhlx",data=>{
				console.log(data);
				this.cdbtc_arr = this.cdbtc_arr.concat(data)
			})
		},
		onUnload() {
			uni.$off("checkcdbkhlx")
		},
		methods: {
			addkehusf(){
				let cdbtc_ids = []
				this.cdbtc_arr.forEach(item=>{
					cdbtc_ids.push(item.id)
				})
				this.jumpdetail('/pages/workbench/kehulxgl?type=1&cdbtc_ids=',cdbtc_ids.join())
			},
			getDetail() {
				this.http.request("/api/Cdb/cdbtcDetail", 'GET', {
					id: this.listid
				}).then(res => {
					let data = res.data
					this.status = data.status
					this.fwf_rate = data.fwf_rate
					this.xd_num = data.xd_num
					this.ccangin_num = data.ccangin_num
					this.name = data.name
					let arr = []
					data.cdbjhsf_data_text.forEach(item=>{
						arr.push({
							id:item.cdbjhsf.id,
							price:item.price,
							name:item.cdbjhsf.name
						})
					})
					this.cdbtc_arr = arr
				})
			},
			async submit() {
				if (this.name == "") {
					this.http.toast("請輸入套餐名稱")
					return false
				}
				if (this.cdbtc_arr.length == 0) {
					this.http.toast("請至少添加一個客戶類型并填寫收費")
					return false
				}
				let arr = []
				for(let i=0; i<this.cdbtc_arr.length;i++){
					let item = this.cdbtc_arr[i]
					if(item.price==""){
						this.http.toast("請輸入"+item.name+"使用金額")
						return false
					}
					arr.push({
						id:item.id,
						price:item.price
					})
				}
				if (this.fwf_rate === "") {
					this.http.toast("請輸入服務費")
					return false
				}
				if(this.xd_num==""){
					this.http.toast("請輸入一次限點總數")
					return false
				}
				if(this.ccangin_num==""){
					this.http.toast("請輸入最低數可再點")
					return false
				}
				let datamsg = {
					shop_id: uni.getStorageSync("shop_id"),
					name: this.name,
					cdbjhsf_data: arr,
					fwf_rate: this.fwf_rate,
					status: this.status,
					xd_num:this.xd_num,
					ccangin_num:this.ccangin_num,
				}
				let url = "/api/Cdb/addCdbtc"
				if (this.listid) {
					url = "/api/Cdb/editCdbtc"
					this.$set(datamsg, "id", this.listid)
				}
				if(this.issubmit) return
				this.issubmit = true
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				let res = await this.http.request(url, 'POST', datamsg)
				uni.hideLoading()
				if (res.code == 1) {
					this.http.toast(res.msg)
					setTimeout(() => {
						uni.navigateBack(1)
					}, 1000)
				} else {
					this.issubmit = false
					this.http.toast(res.msg)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-radio-group {
		flex: none !important;
	}
</style>